<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<script type="text/javascript" src="js/prototype.js"></script>
	<script type="text/javascript" src="js/scriptaculous.js"></script>
	<script type="text/javascript" src="js/builder.js"></script>
	<script type="text/javascript" src="js/effects.js"></script>
	<script type="text/javascript" src="js/dragdrop.js"></script>
	<script type="text/javascript" src="js/controls.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>
	<script type="text/javascript" src="js/sound.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
	
	<link href="css/styles.css" rel="stylesheet" type="text/css">
	<title>PerfClusters</title>
</head>
<body>
	<div align="right">
		<label>Olá, bom dia <%= ((String) session.getAttribute("usuario")).toString() %></label><br>
		<label>Sua cota de tempo disponível é: <%= ((String) session.getAttribute("usuario")).toString() %></label>
	</div>
	<form action="ServletExecucao" method="post">
		<h3 align="center">PerfClusters</h3>
		<div style="margin-left:200px; margin-top: 20px;">
			<table border="2">
			  <tr align="center">
				<td colspan="4" bgcolor="#eeeeff"><b>Aplicação</b>
				</td>
		 	  </tr>
			  <tr>
			    <td>&nbsp;&nbsp;Selecione Arquivo&nbsp;&nbsp;</td>
			    <td align="center">

			    
				    <input align="left" type="file" name="carregarPath" id="carregarPath" class="" size="35" />
					<a href="http://localhost:8081/perfclustersClient/escala_jsp_2.jsp" >
						<img alt="asdf" src="http://localhost:8081/perfclustersClient/images/interrogacao.png" >
					</a>
				
				</td>
			  </tr>
			</table>
	
			<!-- table border="2">
			  <tr align="center">
				<td colspan="4" bgcolor="#eeeeff"><b>Sequência para comparação</b></td>
		 	  </tr>
			  <tr>
			    <td>Sequência FASTA</td>
			    <td align="center">
			    <textarea id="sequencia" cols="60" rows="6" name="sequencia"></textarea></td>
			  </tr>
			  <tr>
			    <td>Base de Comparação</td>
			    <td align="left"><select name="base"><option value="drosoph.nt">Drosoph</option></select></td>
			  </tr>
			</table-->
		</div>
		<div style=" margin-left:200px;">
			<h3 align="left"><b>Tempo Estimado para execução da aplicação</b></h3>
			<table border="2">
			  <tr align="center">
				<td colspan="1" bgcolor="">&nbsp;Tempo Estimado&nbsp;</td>
			    <td align="center">
					<input name="dias_tempo_estimado" id="dias_tempo_estimado" value="0" size="2" maxlength="2" type="text">
					<td>&nbsp;&nbsp;Dias&nbsp;&nbsp;</td>
			    </td>
			    <td align="center">
					<input name="horas_tempo_estimado" id="horas_tempo_estimado" value="0" size="2" maxlength="2" type="text">
			    	<td>&nbsp;&nbsp;Horas&nbsp;&nbsp;</td>
			    </td>
			    <td align="center">
			    	<input name="minutos_tempo_estimado" id="minutos_tempo_estimado" value="0" size="2" maxlength="2" type="text">
			    	<td>&nbsp;&nbsp;Minutos&nbsp;&nbsp;</td>
			    </td>
			    <td align="center">
			    	<input name="segundos_tempo_estimado" id="segundos_tempo_estimado" value="0" size="2" maxlength="2" type="text">
			    	<td>&nbsp;&nbsp;Segundos&nbsp;&nbsp;</td>
			    </td>
		 	  </tr>
			</table>
		</div>
		<div style="margin-left:200px;">
			<h3 align="left"><b>Intensidade de utilização de requisitos/Valores mínimos dos requisitos</b></h3>
			<table border="2">
			  <tr align="center">
				<td colspan="5" bgcolor="#eeeeff">Requisitos de Hardware</td>
		 	  </tr>
			  <tr>
				<td>Métrica</td>
			    <td colspan="3" style="border-right: 0px none;">Valor Mínimo</td>
			    <td>Unidade</td>
			  </tr>
			  <!-- tr>
			    <td>Processamento</td>
			    <td align="center"><input name="val_min_processamento" id="val_min_processamento" value="5" type="text"></td>
			    <td>MFLOPS</td>
			  </tr>
			  <tr>
			    <td>Memória</td>
			    <td align="center"><input name="val_min_memoria" id="val_min_memoria" value="3" type="text"></td>
			    <td>GB</td>
			  </tr>
			  <tr>
			    <td>Throughput Cluster</td>
			    <td align="center"><input name="val_min_rede_interna" id="val_min_rede_interna" value="1" type="text"></td>
			    <td>Mbps</td>
			  </tr>
			  <tr>
			    <td>Throughput Rede</td>
			    <td align="center"><input name="val_min_rede_externa" id="val_min_rede_externa" value="1" type="text"></td>
			    <td>Mbps</td>
			  </tr-->

			    <tr>
			      <th>CPU</th>
			      <td colspan="3" style="border-right: 0px none;">
			        <div id="cputrack" class="slidertrack">
			          <div class="slidertrackleft"></div>
			          <div style="left: 24px; position: relative;" id="cpuhandle" class="sliderhandle selected">
			            <img src="images/slider-images-handle.png" style="float: left;">
			          </div>
			        </div>
			      </td>
			      <td>
			        &nbsp;&nbsp;<input id="val_min_processamento" name="val_min_processamento" size="2" value="2" onchange="setcpu(this.value);" type="text">GHz/core
			      </td>
			    </tr>

			    <tr>
			      <th>Número de nós</th>
			      <td colspan="3" style="border-right: 0px none;">
			        <div id="numnostrack" class="slidertrack">
			          <div class="slidertrackleft"></div>
			          <div style="left: 30px; position: relative;" id="numnoshandle" class="sliderhandle selected">
			            <img src="images/slider-images-handle.png" style="float: left;">
			          </div>
			        </div>
			      </td>
			      <td>
			        <input id="mem" name="mem" size="4" value="1024" onchange="setmem(this.value);" type="text">Nós&nbsp;&nbsp;&nbsp;
			      </td>
			    </tr>			  


			    <tr>
			      <th>Memória</th>
			      <td colspan="3" style="border-right: 0px none;">
			        <div id="memtrack" class="slidertrack">
			          <div class="slidertrackleft"></div>
			          <div style="left: 30px; position: relative;" id="memhandle" class="sliderhandle selected">
			            <img src="images/slider-images-handle.png" style="float: left;">
			          </div>
			        </div>
			      </td>
			      <td>
			        <input id="val_min_memoria" name="val_min_memoria" size="4" value="1024" onchange="setmem(this.value);" type="text">GB&nbsp;&nbsp;&nbsp;&nbsp;
			      </td>
			    </tr>			  


			    <tr>
			      <th>Throughput Cluster</th>
			      <td colspan="3" style="border-right: 0px none;">
			        <div id="memtrack" class="slidertrack">
			          <div class="slidertrackleft"></div>
			          <div style="left: 30px; position: relative;" id="memhandle" class="sliderhandle selected">
			            <img src="images/slider-images-handle.png" style="float: left;">
			          </div>
			        </div>
			      </td>
			      <td>
			        <input id="val_min_rede_interna" name="val_min_rede_interna" size="4" value="1024" onchange="setmem(this.value);" type="text">Mbps
			      </td>
			    </tr>			  
			    <tr>
			      <th>Throughput Rede</th>
			      <td colspan="3" style="border-right: 0px none;">
			        <div id="memtrack" class="slidertrack">
			          <div class="slidertrackleft"></div>
			          <div style="left: 30px; position: relative;" id="memhandle" class="sliderhandle selected">
			            <img src="images/slider-images-handle.png" style="float: left;">
			          </div>
			        </div>
			      </td>
			      <td>
			        <input id="val_min_rede_externa" name="val_min_rede_externa" size="4" value="1024" onchange="setmem(this.value);" type="text">Mbps
			      </td>
			    </tr>			  

			</table>
		</div>
		<!-- div style=" margin-left:200px;">
			<h3 align="left">Intensidade de utilização de requisitos</h3>
			<table border="2">
			  <tr align="center">
				<td colspan="1" bgcolor=""><b></b></td>
				<td colspan="3" bgcolor="#eeeeff"><b>Requisitos do Cluster</b></td>
				<td colspan="1" bgcolor="#eeeeff"><b>&nbsp;&nbsp;Requisitos da Rede&nbsp;&nbsp;</b></td>
		 	  </tr>
			  <tr>
			    <th></th>
			    <th>&nbsp;&nbsp;Processamento&nbsp;&nbsp;</th>
			    <th>&nbsp;&nbsp;Memória&nbsp;&nbsp;</th>
			    <th>&nbsp;&nbsp;Throughput&nbsp;&nbsp;</th><%-- entre Processos --%>
			    <th>&nbsp;&nbsp;Throughput&nbsp;&nbsp;</th><%-- Cliente/Servidor--%>
			  </tr>
			  <tr>
			    <td>&nbsp;&nbsp;Intenso&nbsp;&nbsp;</td>
			    <td align="center"><input name="processamento" id="bastante_processamento" value="10_processamento" type="radio" checked="checked"></td>
			    <td align="center"><input name="memoria" id="bastante_memoria" value="10_memoria" type="radio"></td>
			    <td align="center"><input name="rede_interna" id="bastante_rede_interna" value="10_rede_interna" type="radio"></td>
			    <td align="center"><input name="rede_externa" id="bastante_rede_externa" value="10_rede_externa" type="radio"></td>
			  </tr>
			  <tr>
			    <td>&nbsp;&nbsp;Médio&nbsp;&nbsp;</td>
			    <td align="center"><input name="processamento" id="pouco_processamento" value="5_processamento" type="radio"></td>
			    <td align="center"><input name="memoria" id="pouco_memoria" value="5_memoria" type="radio" checked="checked" ></td>
			    <td align="center"><input name="rede_interna" id="pouco_rede_interna" value="5_rede_interna" type="radio"></td>
			    <td align="center"><input name="rede_externa" id="pouco_rede_externa" value="5_rede_externa" type="radio"></td>
			  </tr>
			  <tr>
			    <td>Baixo</td>
			    <td align="center"><input name="processamento" id="muito_pouco_processamento" value="1_processamento" type="radio"></td>
			    <td align="center"><input name="memoria" id="muito_pouco_memoria" value="1_memoria" type="radio"></td>
			    <td align="center"><input checked="checked" name="rede_interna" id="muito_pouco_rede_interna" value="1_rede_interna" type="radio"></td>
			    <td align="center"><input checked="checked" name="rede_externa" id="muito_pouco_rede_externa" value="1_rede_externa" type="radio"></td>
			  </tr>
			</table>
		</div-->
		<div align="left" style="margin-left:200px; margin-top: 30px;">
			<input type="submit" value="Submete Configuração">
		</div>
		<div style="margin-left:850px; margin-top: -530px;">
			<h3 align="left">Escolha os recursos</h3>
			<table border="2">
			  <tr align="center">
				<td colspan="5" bgcolor="#eeeeff"><b>Recursos disponíveis</b></td>
		 	  </tr>
			  <%= ((String) session.getAttribute("recursos_tela")).toString() %>
			</table><br>
		</div>
	</form>
	<script type="text/javascript">
	  // <![CDATA[
	  var cpumin = 1;
	  var cpumax = 20;
	  var memmin = 256;
	  var memmax = 8192;
	  var cpuslider = new Control.Slider('cpuhandle', 'cputrack', {
	    sliderValue: (3 - cpumin) / (cpumax-cpumin),
	    onSlide: function(v) {
	      $('val_min_processamento').value = (cpumin + v*(cpumax-cpumin)).toFixed();
	    },
	    onChange: function(v) {
	      $('val_min_processamento').value = (cpumin + v*(cpumax-cpumin)).toFixed();
	    }
	  });
	  var memslider = new Control.Slider('memhandle', 'memtrack', {
	    sliderValue: (1024 - memmin) / (memmax-memmin),
	    onSlide: function(v) {
	      $('val_min_memoria').value = (memmin + v*(memmax-memmin)).toFixed();
	    },
	    onChange: function(v) {
	      $('val_min_memoria').value = (memmin + v*(memmax-memmin)).toFixed();
	    }
	  });
	  function setSliderValue(slider, value, minvalue, maxvalue){
	    if (isNaN(value))
	      slider.setValue(0);
	    else
	      slider.setValue((value-minvalue)/(maxvalue-minvalue));
	  }
	  function setcpu(value){
	    setSliderValue(cpuslider, value, cpumin, cpumax);
	  }
	  function setmem(value){
	    setSliderValue(memslider, value, memmin, memmax);
	  }
	  // ]]>
	</script>
</body>
</html>